<template>
  <div class="healthCard">
    <div class="mainbox">
      <h1 style="margin-left: 30px; line-height: 50px">健康卡信息列表</h1>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <div style="width: 96%; height: 500px; margin: 20px auto 0">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-input
              v-model="search"
              placeholder="请输入姓名查询用户健康卡"
            ></el-input>
          </el-col>
          <el-col :span="20">
            <el-button
              type="primary"
              @click="searchfun(search)"
              style="width: 60px"
              >搜索</el-button
            >
            <el-button
              type="primary"
              style="width: 100px"
              @click="patientFormVisible = true"
              >新建健康卡</el-button
            >
          </el-col>
        </el-row>
        <!-- 数据 -->
        <el-table :data="scope.tableData" style="width: 100%" height="440">
          <el-table-column label="序号" sortable width="100">
            <template #default="scope">
              <div>{{ scope.row.pid }}</div>
            </template>
          </el-table-column>
          <el-table-column label="身份证号（健康卡号）" width="200">
            <template #default="scope">
              <div>
                <el-tag size="small">{{ scope.row.pstatusid }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100">
            <template #default="scope">
              <div>{{ scope.row.pname }}</div>
            </template>
          </el-table-column>
          <el-table-column label="名族" width="100">
            <template #default="scope">
              <div>{{ scope.row.pnomenclature }}</div>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="100">
            <template #default="scope">
              <div>{{ scope.row.psex }}</div>
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="100">
            <template #default="scope">
              <div>{{ scope.row.page }}</div>
            </template>
          </el-table-column>

          <el-table-column label="手机号码" width="150">
            <template #default="scope">
              <div>{{ scope.row.pphone }}</div>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" width="210">
            <template #default="scope">
              <div>{{ scope.row.pcreateTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button
                type="danger"
                @click="delBypId(scope.row.pid)"
                style="padding: 0 10px"
                >删除</el-button
              >
              <el-button
                type="success"
                @click="
                  (patientFormVisibleupdate = true), updateBypId(scope.row.pid)
                "
                style="padding: 0 10px"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[8, 20, 30, 50, 100]"
            :page-size="scope.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="scope.total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
  <!-- 增加健康卡模块 -->
  <el-dialog title="新建健康卡" v-model="patientFormVisible" width="500px">
    <el-form :model="patientform" ref="patientform">
      <el-form-item
        label="患者姓名"
        prop="pName"
        class="space"
        :rules="[{ required: true, message: '姓名不能为空' }]"
      >
        <el-input
          v-model="patientform.pName"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="请选择民族"
        class="space"
        prop="pNomenclature"
        :rules="[{ required: true, message: '民族不能为空' }]"
      >
        <el-select
          v-model="patientform.pNomenclature"
          filterable
          placeholder="请选择民族"
          class="add-nation-input"
          @change="nationChange"
        >
          <el-option
            v-for="item in nationList"
            :key="item.value"
            :label="item.info"
            :value="item.value"
            style="padding: 0 10px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="性别"
        class="space"
        prop="pSex"
        :rules="[{ required: true, message: '性别不能为空' }]"
      >
        <el-radio v-model="patientform.pSex" label="男">男</el-radio>
        <el-radio
          v-model="patientform.pSex"
          label="女"
          style="margin-left: 10px"
          >女</el-radio
        >
      </el-form-item>
      <el-form-item
        label="年龄"
        class="space"
        prop="pAge"
        :rules="[
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字值' },
        ]"
      >
        <el-input
          v-model.number="patientform.pAge"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="身份证号码"
        class="space"
        prop="pStatusid"
        :rules="[{ required: true, message: '身份证号码不能为空' }]"
      >
        <el-input
          v-model="patientform.pStatusid"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="手机号码"
        class="space"
        prop="pPhone"
        :rules="[{ required: true, message: '手机号码不能为空' }]"
      >
        <el-input
          v-model="patientform.pPhone"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" style="margin-top: 20px">
      <el-button style="padding: 0 15px" @click="patientFormVisible = false"
        >取 消</el-button
      >
      <el-button style="padding: 0 15px" type="primary" @click="regPatient()"
        >确 定</el-button
      >
    </div>
  </el-dialog>
  <!-- 修改健康卡模块 -->
  <el-dialog
    title="修改健康卡"
    v-model="patientFormVisibleupdate"
    width="500px"
  >
    <el-form :model="patientform" ref="patientform">
      <el-form-item
        label="患者姓名"
        prop="pName"
        class="space"
        :rules="[{ required: true, message: '姓名不能为空' }]"
      >
        <el-input
          v-model="patientform.pName"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="请选择民族"
        class="space"
        prop="pNomenclature"
        :rules="[{ required: true, message: '民族不能为空' }]"
      >
        <el-select
          v-model="patientform.pNomenclature"
          filterable
          placeholder="请选择民族"
          class="add-nation-input"
          @change="nationChange"
        >
          <el-option
            v-for="item in nationList"
            :key="item.value"
            :label="item.info"
            :value="item.value"
            style="padding: 0 10px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="性别"
        class="space"
        prop="pSex"
        :rules="[{ required: true, message: '性别不能为空' }]"
      >
        <el-radio v-model="patientform.pSex" label="男">男</el-radio>
        <el-radio
          v-model="patientform.pSex"
          label="女"
          style="margin-left: 10px"
          >女</el-radio
        >
      </el-form-item>
      <el-form-item
        label="年龄"
        class="space"
        prop="pAge"
        :rules="[{ required: true, message: '年龄不能为空' }]"
      >
        <el-input
          v-model.number="patientform.pAge"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="身份证号码"
        class="space"
        prop="pStatusid"
        :rules="[{ required: true, message: '身份证号码不能为空' }]"
      >
        <el-input
          v-model="patientform.pStatusid"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="手机号码"
        class="space"
        prop="pPhone"
        :rules="[{ required: true, message: '手机号码不能为空' }]"
      >
        <el-input
          v-model="patientform.pPhone"
          autocomplete="off"
          style="width: 200px"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" style="margin-top: 20px">
      <el-button
        style="padding: 0 15px"
        @click="patientFormVisibleupdate = false"
        >取 消</el-button
      >
      <el-button style="padding: 0 15px" type="primary" @click="updatePatient()"
        >修 改</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive } from "vue";
import api from "@/http/api";
const $router = useRouter();
export default {
  name: "healthCard",
  setup() {
    const scope = reactive({
      tableData: [],
      page: "",
      pcreateTime: "",
      pid: "",
      pname: "",
      pnomenclature: "",
      pphone: "",
      psex: "",
      pstatusid: "",

      total: 0, //总条数
      pageSize: 8, //每页显示行数
      currentPage: 1, //当前页码
    });
    //获取总条数
    api({
      url: "/hrs/all",
      method: "get",
    }).then((res) => {
      scope.total = res.data.length;
    });
    api({
      url: "/hrs/allByPage",
      method: "get",
    }).then((res) => {
      scope.tableData = res.data;
    });

    //分页-每页显示条数
    function handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      api({
        url: "/hrs/allByPage?pageSize=" + `${val}`,
        method: "get",
      }).then((res) => {
        scope.tableData = res.data;
      });
    }
    //分页-当前页
    function handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      api({
        url: "/hrs/allByPage?pageNum=" + `${val}`,
        method: "get",
      }).then((res) => {
        scope.tableData = res.data;
      });
    }
    //搜索
    function searchfun(search) {
      api({
        url: "/hrs/queryBypName?pName=" + search,
        method: "get",
      }).then((res) => {
        scope.tableData = res.data;
      });
    }

    return {
      scope,
      handleSizeChange,
      handleCurrentChange,
      searchfun,
    };
  },
  data() {
    return {
      regFormVisible: false,
      patientFormVisible: false,
      patientFormVisibleupdate: false,
      formLabelWidth: "120px",
      patientform: {
        pId: "",
        pName: "",
        pNomenclature: "汉族",
        pSex: "男",
        pAge: "",
        pStatusid: "",
        pPhone: "",
      },
      healthCardMark: "",
      healthName: "",
      search: "",
    };
  },
  methods: {
    //新建健康卡
    regPatient() {
      api({
        url: "/hrs/insert",
        method: "post",
        params: {
          pName: this.patientform.pName,
          pNomenclature: this.patientform.pNomenclature,
          pSex: this.patientform.pSex,
          pAge: this.patientform.pAge,
          pStatusid: this.patientform.pStatusid,
          pPhone: this.patientform.pPhone,
        },
      }).then((res) => {
        console.log(res);
        this.patientFormVisible = false;
        this.$router.go(0);
      });
    },
    //根据id删除
    delBypId(pid) {
      api({
        url: "/hrs/delBypId?pId=" + pid,
        method: "post",
      }).then((res) => {
        console.log(res);
        this.$router.go(0);
      });
    },
    //根据id获取数据
    updateBypId(pid) {
      api({
        url: "/hrs/queryBypId?pId=" + pid,
        method: "get",
      }).then((res) => {
        this.patientform.pId = res.data.pid;
        this.patientform.pName = res.data.pname;
        this.patientform.pNomenclature = res.data.pnomenclature;
        this.patientform.pSex = res.data.psex;
        this.patientform.pAge = res.data.page;
        this.patientform.pStatusid = res.data.pstatusid;
        this.patientform.pPhone = res.data.pphone;
      });
    },
    //根据id修改数据
    updatePatient() {
      console.log("点击了修改");
      console.log(this.patientform.pName);
      api({
        url: "/hrs/updateBypId",
        method: "post",
        params: {
          pId: this.patientform.pId,
          pName: this.patientform.pName,
          pNomenclature: this.patientform.pNomenclature,
          pSex: this.patientform.pSex,
          pAge: this.patientform.pAge,
          pStatusid: this.patientform.pStatusid,
          pPhone: this.patientform.pPhone,
        },
      }).then((res) => {
        console.log(res);
        this.patientFormVisible = false;
        this.$router.go(0);
      });
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.healthCard {
  width: 100%;
  height: 1000px;
  background: #fff;
  box-sizing: border-box;
  overflow: auto;
}
.regbtn {
  width: 19%;
  height: 60px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  height: 60px;
  background: #419ee9;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  color: #fff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.space {
  margin-bottom: 20px;
}

.state {
  margin-left: 10px;
  font-size: 22px;
  font-weight: bold;
  color: #67c23a;
}
</style>